
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Parsley, the ultimate frontend javascript form validation library">
    <meta name="author" content="Guillaume Potier">

    <title>Parsley - Examples and form demonstration</title>

    <!-- Bootstrap core CSS -->
    <link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="assets/docs.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/7.3/styles/github.min.css" rel="stylesheet">

    <link href="../src/parsley.css" rel="stylesheet">
    <style>
      body {
        color: #111111;
      }
      .row {
        margin-top: 10px;
      }
      .code-block {
        margin-top: 20px;
      }
      .hidden {
        display: none;
      }
      .row a h2, .row h2 {
        color: #FF851B;
        height: 66px;
      }
      .row a p {
        color: #111;
        text-align: justify;
      }
      .row .link {
        color: #428bca;
      }
    </style>
  </head>

  <body>
    <div class="container">

      <div class="masthead">
        <div class="header">
          <h3 class="text-muted"><a href="../">Parsley</a></h3>

          <span class="social-buttons inline-block">
            <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://parsleyjs.org" data-text="Parsley, the ultimate javascript form validation library. #parsleyjs" data-via="guillaumepotier" data-related="guillaumepotier" data-hashtags="parsleyjs">Tweet</a>
            <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

            <iframe src="http://ghbtns.com/github-btn.html?user=guillaumepotier&repo=Parsley.js&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>

            <iframe src="http://ghbtns.com/github-btn.html?user=guillaumepotier&repo=Parsley.js&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
          </span>
        </div>
      </div>

      <ul class="nav nav-justified">
        <li><a href="../">Home</a></li>
        <li class="active"><a href="examples.html">Examples</a></li>
        <li><a href="index.html">Documentation</a></li>
        <li><a href="download.html">Download</a></li>
        <li><a href="help.html">Help</a></li>
        <li><a href="annotated-source/main.html">Annotated&nbsp;source</a></li>
        <li><a href="tests.html">Tests</a></li>
        <li><a href="about.html">About</a></li>
      </ul>

      <!-- Example row of columns -->
      <div class="row">
        <a href="examples/simple.html">
          <div class="col-lg-4">
            <h2>A simple demo form to showcase various inputs</h2>
            <p class="argument">A simple demo form that uses most of supported Parsley elements to show how to <strong>bind, configure and validate them properly.</strong> For more information, please have a look at the documentation.</p>
            <p class="link">View example &raquo;</p>
          </div>
        </a>

        <a href="examples/events.html">
          <div class="col-lg-4">
            <h2>Using events to make complex validations</h2>
            <p class="argument">Sometimes, regular validators and regular Parsley validation process <strong>is not enough</strong> for your forms. <strong>See how you could leverage Parsley events</strong> to make incredible validations!</p>
            <p class="link">View example &raquo;</p>
          </div>
        </a>

        <a href="examples/multisteps.html">
          <div class="col-lg-4">
            <h2>A multi steps form with Parsley validation</h2>
            <p class="argument">Sometimes, you'll need to split <strong>long and fastidious forms</strong> into multiple parts. See how you could leverage <strong>Parsley groups</strong> to easily validate such multi step forms, step by step.</p>
            <p class="link">View example &raquo;</p>
          </div>
        </a>
      </div>

      <div class="row">
        <a href="examples/customvalidator.html">
          <div class="col-lg-4">
            <h2>Craft your own validators demo</h2>
            <p class="argument">Sometimes, you'll need to create <strong>custom validators for your needs</strong> because default built-in ones are simply not enough. See how you could do it and make very powerful <strong>custom reusable validators</strong>.</p>
            <p class="link">View example &raquo;</p>
          </div>
        </a>

        <a href="examples/custom-validator-events.html">
          <div class="col-lg-4">
            <h2>Validating a group on inputs</h2>
            <p class="argument">Validations dependent on more than one inputs can be difficult to achieve (and we are working on this). See how you could leverage Parsley's ability to <strong>validate <code>&lt;div&gt;</code> and other non inputs</strong> to validate groups of inputs!</p>
            <p class="link">View example &raquo;</p>
          </div>
        </a>

         <a href="examples/ajax.html">
          <div class="col-lg-4">
            <h2>Promises and Ajax</h2>
            <p class="argument">Parsley handles <strong>promises</strong> and thus <strong>ajax requests</strong> seamlessly.</p>
            <p class="link">View example &raquo;</p>
          </div>
        </a>

      </div>
      <div class="row">
         <div class="col-lg-4">
            <h2>Stylish floating error labels</h2>
            <p class="argument"><a href="https://twitter.com/zslabs">Zach Schnackel</a> shows us how to style inputs to make beautiful floating error labels.</p>
            <a href="http://codepen.io/zslabs/pen/eNegqY" target="_blank">
              <p class="link">View example &raquo;</p>
            </a>
          </div>

      </div>

      <!-- Site footer -->
      <div class="footer">
        <p>&copy; <a href="https://twitter.com/guillaumepotier" title="Guillaume Potier on Twitter">Guillaume Potier</a> 2014 - <a href="http://wisembly.com">@Wisembly</a></p>
      </div>
    </div>

    <script src="../bower_components/jquery/dist/jquery.min.js"></script>
    <script src="../bower_components/bootstrap/js/affix.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/7.3/highlight.min.js"></script>

    <script src="../dist/parsley.js"></script>
    <script>
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-37229467-1']);
      _gaq.push(['_trackPageview']);

      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    </script>
  </body>
</html>
